.template-location-editor {
  .rule-groups {
    margin-bottom: 1rem;
  }

  .rule-group {
    margin-bottom: 0.5rem;
  }

  .rule-group:not(:first-child) {
    margin-top: 0.5rem;
  }

  .rule-group {
    padding-top: 0.5rem;
    border-top: 1px solid #ddd;

    // For rule description
    p {
      margin: 0 0 0.5em 0;
      &,
      code {
        font-size: 12px;
      }
    }
  }
  .rule-group:last-child {
    // padding-bottom: .5rem;
    border-bottom: 1px solid #ddd;
  }

  .rule {
    display: flex;
    width: 100%;
    // flex-wrap: wrap;

    .select2-container {
      min-width: 80px;
    }

    /**
     * Vertically center label - Select2's default style is line height 28px,
     * which pushes the label down for some reason
     */
    .select2-container--default
      .select2-selection--single
      .select2-selection__rendered {
      line-height: 26px;
    }
    // Align regular input field
    input[type='text'] {
      min-height: 28px;
      height: 28px;
    }
  }

  .rule-parts {
    display: flex;
    // flex: 1 0 auto; // Grow
    flex-wrap: wrap;
  }

  .rule-part {
    // flex: 1 0 auto; // Grow

    margin-right: 0.5rem;
    // margin-top: .5rem;
    margin-bottom: 0.5rem;
  }

  /**
   * Rule actions
   */

  .rule-actions {
    flex: 1 0 auto; // Grow

    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .rule-action {
    height: 100%;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }

  .icon {
    width: 18px;
    height: 18px;

    cursor: pointer;

    svg path {
      fill: #999;
      stroke: #999;
      transition: all 0.3s;
    }

    &:hover svg path {
      fill: #000;
      stroke: #000;
    }
  }

  .rule-action--remove-rule .icon {
    width: 14px;
    height: 14px;
  }

  .rule-action--remove-rule:hover svg path {
    fill: red;
    stroke: red;
  }
}
